<template>
  <div class="regiondiv">
    <el-input placeholder="Input key word to filter" v-model="filterText">
    </el-input>
    <div class="tree-scroll">
      <el-tree class="flow-tree" :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps"  :filter-node-method="filterNode" ref="tree" @check="treeCheck">
      </el-tree>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import {globalBus} from './globalBus';
export default {
  watch: {
    filterText(val) {
      // debugger
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      // debugger

      if (!value) return true;
      return data.acronym.indexOf(value) !== -1;
    },
    treeCheck(a,b){
      let selected = b.checkedNodes.length && b.checkedNodes.indexOf(a) !== -1

      if(selected)
        globalBus.$emit('addRegion',[a.id,a.acronym,a.color_hex_triplet]);
      else
        globalBus.$emit('removeRegion',[a.id,a.acronym]);

    }
  },
  created() {
      axios.get('./static/1.json')
        .then(res => {
          // debugger
          this.data=res.data.msg;
        })
  },
  data() {

    return {
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'acronym'
      }
    };
  }

}

</script>
<style scoped>
div {

  background: #524540;
  color: #fff;
}

div.regiondiv {
  height: 30%;
  padding: 0px;
  /*margin:0px ;*/
  line-height: 40px;
  background: #524540;
  color: #fff;
}

div.tree-scroll {
  height: calc(100% - 40px);
  background: #524540;
  color: #fff;
}

/* 设置节点鼠标悬浮三角图标鼠标悬浮的颜色 */
/deep/ .el-tree-node__content:hover .el-tree-node__expand-icon {
  color: #000;
}

/* 树节点鼠标悬浮式改变背景色，字体颜色 */
/deep/ .el-tree-node__content:hover {
  background-color: #888888;
  color: #fff;
}

/deep/ .el-tree-node.is-current > .el-tree-node__content {
    background-color: #aaaaaa !important;
  }
.tree-scroll {

  padding: 0px 0;
  /*box-sizing: border-box;*/
  overflow: scroll;

  >.el-tree {
    >.el-tree-node {
      /*设置横向滚动条*/
      min-width: 100%;
      display: inline-block;


      /*设置根节点隐藏*/
      >.el-tree-node__content {

        /*display: none;*/
        &:hover {
          background: #8932f7;
        }
      }
    }
  }


}

</style>
